<template>
	<view class="page-versatile-show page-common flex-column-gap-10">
		<custom-swiper height="200rpx" :showDot="false" :pictures="banners" @clickItem="toPage" />
		<view class="plr-16 pb-16 flex-column-gap-10">
			<view class="normal-title-bold-16 blue-text">
				AI超绘玩
			</view>
			<view class="flex-wrap-gap-10">
				<view class="func-card image-card-radio-8 flex-column-gap-10 padding-16" v-for="(item,index) in aiFuncs"
					:style="{backgroundImage: `url(${resolveImage(item.src)})`}" @click="toPage(item)">
					<view class="flex-column-gap-3">
						<view class="normal-title-bold">{{item.name}}</view>
						<view class="desc-10">{{item.desc}}</view>
					</view>
					<view class="custom-button btn-68 bold">
						<u-button type="primary" size="small" shape="circle" text="立即制作"></u-button>
					</view>
				</view>
			</view>
			<view class="normal-title-bold-16 blue-text">
				图像工具
			</view>
			<view class="flex-wrap-gap-10">
				<view class="func-card image-card-radio-8 flex-column-gap-10 padding-16"
					v-for="(item,index) in freeFuncs" :style="{backgroundImage: `url(${resolveImage(item.src)})`}"
					@click="toPage(item)">
					<view class="flex-column-gap-3">
						<view class="normal-title-bold">{{item.name}}</view>
						<view class="desc-10">{{item.desc}}</view>
					</view>
					<view class="custom-button btn-68 bold">
						<u-button type="primary" size="small" shape="circle" text="立即制作"></u-button>
					</view>
				</view>
			</view>
			<view class="normal-title-bold-16 blue-text">
				创意工坊
			</view>
			<view class="image-card-radio-8 flex-column-gap-10 padding-16" v-for="(item,index) in ideaFuncs"
				:style="{backgroundImage: `url(${resolveImage(item.src)})`}">
				<!-- #ifdef MP-ALIPAY -->
				<view class="hidden-contact">
					<contact-button tnt-inst-id="aV0_S7oH" scene="SCE01270193" icon="/static/other/custom-beauty.png"
						size="750*750rpx" />
				</view>
				<!-- #endif -->
				<!-- #ifndef MP-ALIPAY || MP-KUAISHOU -->
				<view class="artificial-beauty-box">
					<button class="hidden-contact" open-type="contact">在线客服</button>
				</view>
				<!-- #endif -->
				<view class="flex-column-gap-3">
					<view class="normal-title-bold">{{item.name}}</view>
					<view class="desc-10">{{item.desc}}</view>
				</view>
				<!-- #ifndef MP-KUAISHOU -->
				<view class="custom-button btn-68 bold">
					<u-button type="primary" size="small" shape="circle" text="立即制作"></u-button>
				</view>
				<!-- #endif -->
			</view>
		</view>
	</view>


</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue";
	import customSwiper from '@/components/custom-swiper/custom-swiper.vue';
	import {
		resolveImage
	} from '@/common/js/method.js';
	import ArtificialBeauty from '@/components/artificial-beauty/artificial-beauty.vue';
	const banners = [{
		id: '1',
		src: '/swiper/banner01.png',
		page: '/pages/versatile-show/func-pre?type=manga-photos',
	}, {
		id: '2',
		src: '/swiper/banner02.png',
		page: '/pages/versatile-show/func-pre?type=sketch-portrait',
	}, {
		id: '3',
		src: '/swiper/banner03.png',
		page: '/pages/versatile-show/func-pre?type=old-photo-restoration',
	}, {
		id: '4',
		src: '/swiper/banner04.png',
	}, ]
	const aiFuncs = [{
		id: '1',
		name: '人像素描',
		desc: '高级素描质感',
		src: '/swiper/huaban7.png',
		page: '/pages/versatile-show/func-pre?type=sketch-portrait',
	}, {
		id: '2',
		name: '漫画照',
		desc: '照片变漫画',
		src: '/swiper/huaban1.png',
		page: '/pages/versatile-show/func-pre?type=manga-photos',
	}, {
		id: '3',
		name: '老照片修复',
		desc: '还原高清画质',
		src: '/swiper/huaban2.png',
		page: '/pages/versatile-show/func-pre?type=old-photo-restoration',
	}, {
		id: '4',
		name: '黑白上色',
		desc: '一键变彩照',
		src: '/swiper/huaban3.png',
		page: '/pages/versatile-show/func-pre?type=black-white-coloring',
	}, ]

	const freeFuncs = [{
		id: '1',
		name: '修改DPI',
		desc: '修改分辨率',
		src: '/swiper/huaban4.png',
		page: '/pages/versatile-show/modify-dpi',
	}, {
		id: '2',
		name: '图片格式转换',
		desc: '常见格式转换',
		src: '/swiper/huaban5.png',
		page: '/pages/versatile-show/img-format-change',
	}];
	const ideaFuncs = [{
		id: '1',
		name: '周边定制',
		desc: '照片定制专属周边',
		src: '/swiper/huaban6.png',
		page: '',
	}]
	const toPage = (item) => {
		console.log('toPage', item)
		if (item.page) {
			uni.navigateTo({
				url: item.page,
			})
		}
	}
</script>

<style lang="scss" scoped>
	.page-versatile-show {
		.func-card {
			width: 332rpx;
		}
	}
</style>